<template>
    <div class="evaluate-list">
        <div class="evaluate-box" v-for="(item, index) in coachEvaluates" :key="index">
            <div class="evaluate-msg">
                <img class="user-avatur" :src="item.avatar" alt="">
                <div class="user-info">
                    <p>
                        <span class="user-name">{{item.nickname}}</span>
                        <span class="evaluate-name">{{item.evaluationTime}}</span>
                    </p>
                    <i-rate :value="item.evaluationStar" class="rate-box"></i-rate>
                </div>
            </div>
            <div class="evaluate-content" :class="{'bottom-noline': index === coachEvaluates.length -1}">
                {{item.evaluationContent}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        coachEvaluates:Array
    }
}
</script>

<style lang="stylus">
.evaluate-box
    background #ffffff
    padding-top 16px
    padding-left 10px
    .evaluate-msg
        display flex
        .user-avatur
            width 38px
            height 38px
            border-radius 50%
        .user-info
            margin-left 8px
            flex 1
            height 48px
            padding-bottom 15px
            box-sizing border-box
            >p
                display flex
                align-items center
                justify-content space-between
                padding-right 10px
                .user-name
                    color: #2e3450;
                    font-size: 13px;
                .evaluate-name    
                    font-size: 13px;
                    color: #babdc9;
            .rate-box
                position relative
                top -10px
                .i-rate
                    margin-top -10px  
    .evaluate-content
        margin-top 2px
        font-size: 13px;  
        padding-right 10px              
        line-height: 1.54;
        color #3c4d6b
        padding-bottom 16px
        border-bottom 1px solid #e6e6e6
    .bottom-noline
        border-bottom 0px solid #e6e6e6 !important    
</style>
